<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>01列表渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 遍历对象 -->
        <h1>海贼王篇目</h1>
        <ul>
            <li v-for='(ct,index) in contents':key='ct.id'>
                {{ct.id}} - {{ct.name}} - {{ct.chapter}}
            </li>
        </ul><hr>
        <!-- 遍历字符串 -->
        <h1>海贼王</h1>
        <ul>
            <li v-for='(char,index) in msp'>
                {{char}} - {{index}}
            </li>
        </ul><hr>
        <!-- 遍历数字 -->
        <h1>number</h1>
        <ul>
            <li v-for='(number,index) in 10'>
                {{number}} - {{index}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                contents :[
                    {id:'01',name:'东海冒险篇',chapter:'第60话' },
                    {id:'02',name:'阿拉巴斯坦篇',chapter:'第143话'},
                    {id:'03',name:'空岛篇',chapter:'第195话'},
                    {id:'04',name:'海军要塞G8',chapter:'第206话'},
                    {id:'05',name:'长链岛篇',chapter:'第226话'},
                    {id:'06',name:' 司法岛篇',chapter:'第325话'}
                ],
                msp:'one plece'
            },
            methods: {},
            computed: {},
            watch: {}
        })
    </script>
</body>

</html>